<template>
  <page-wrap scrollType="bs" :initBs="initBs">
    <template v-slot:RollingLow>
      <TimeChange @select="onSelectTimeChange"></TimeChange>
      <div class="performance-container-center">
        <z-tab
          :tabList="tabList"
          :border="false"
          class="center-tab"
          @click="change($event)"
        ></z-tab>
        <div class="classification" @click="showItem = true">
          {{ classification }}
          <div class="classification-icon"></div>
        </div>
        <div class="center-line"></div>
      </div>
    </template>
    <div class="performance-container">
      <div class="tab-main" v-show="selected === '单品'">
        <div class="main-title">
          <div class="main-title-name">单品/套餐名称</div>
          <div
            class="main-title-num"
            @click="onSort('单品')"
            :class="numActive"
          >
            销售数量
            <div class="main-title-icon"></div>
          </div>
          <div
            class="main-title-income"
            @click="onSortIncome('单品')"
            :class="inComeActive"
          >
            销售收入
            <div class="main-title-icon"></div>
          </div>
        </div>
        <div class="main-item" v-for="(item, index) in singleInfo" :key="index">
          <div class="main-item-upper">
            <div class="item-upper-name">{{ item.goodsName }}</div>
            <div class="item-upper-num">{{ item.saleQty }}</div>
            <div class="item-upper-income">
              {{ formatNumber(item.saleAmt) }}
            </div>
          </div>
          <!-- <ul class="main-item-below" v-show="item.children">
            <li v-for="(item2, index2) in item.children" :key="index2">
              <div class="li-name">{{ item2.chiName }}</div>
              <div class="li-num">{{ item2.num }}</div>
              <div>{{ item2.income }}</div>
            </li>
          </ul> -->
          <div class="main-item-line" v-show="!item.children"></div>
        </div>
      </div>

      <div class="tab-main" v-show="selected === '套餐'">
        <div class="main-title">
          <div class="main-title-name">单品/套餐名称</div>
          <div
            class="main-title-num"
            @click="onSort('套餐')"
            :class="numActive"
          >
            销售数量
            <div class="main-title-icon"></div>
          </div>
          <div
            class="main-title-income"
            @click="onSortIncome('套餐')"
            :class="inComeActive"
          >
            销售收入
            <div class="main-title-icon"></div>
          </div>
        </div>
        <div
          class="main-item"
          v-for="(item, index) in packageInfo"
          :key="index"
        >
          <div class="main-item-upper">
            <div class="item-upper-name">{{ item.goodsName }}</div>
            <div class="item-upper-num">{{ item.saleQty }}</div>
            <div class="item-upper-income">
              {{ formatNumber(item.saleAmt) }}
            </div>
          </div>
          <ul class="main-item-below" v-show="item.staOrderDetailDtos.length">
            <li
              v-for="(item2, index2) in item.staOrderDetailDtos"
              :key="index2"
            >
              <div class="li-name">{{ item2.goodsName }}</div>
              <div class="li-num">{{ item2.saleQty }}</div>
              <div class="li-income">{{ formatNumber(item2.saleAmt) }}</div>
            </li>
          </ul>
          <!-- <div class="main-item-line" v-show="!item.children"></div> -->
        </div>
      </div>

      <div class="tab-main" v-show="selected === '单品含套餐'">
        <div class="main-title">
          <div class="main-title-name">单品/套餐名称</div>
          <div
            class="main-title-num"
            @click="onSort('单品含套餐')"
            :class="numActive"
          >
            销售数量
            <div class="main-title-icon"></div>
          </div>
          <div
            class="main-title-income"
            @click="onSortIncome('单品含套餐')"
            :class="inComeActive"
          >
            销售收入
            <div class="main-title-icon"></div>
          </div>
        </div>

        <div
          class="main-item"
          v-for="(item, index) in productInfo"
          :key="index"
        >
          <div class="main-item-upper">
            <div class="item-upper-name">{{ item.goodsName }}</div>
            <div class="item-upper-num">{{ item.saleQty }}</div>
            <div class="item-upper-income">
              {{ formatNumber(item.saleAmt) }}
            </div>
          </div>
          <ul class="main-item-below" v-if="item.staOrderDetailDtos.length">
            <li
              v-for="(item2, index2) in item.staOrderDetailDtos"
              :key="index2"
            >
              <div class="li-name">{{ item2.goodsName }}</div>
              <div class="li-num">{{ item2.saleQty }}</div>
              <div class="li-income">{{ formatNumber(item2.saleAmt) }}</div>
            </li>
          </ul>
          <div
            class="main-item-line"
            v-show="!item.staOrderDetailDtos.length"
          ></div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="performance-container-footer" v-if="totalResult1">
        <div style="flex-basis: 20%">合计</div>
        <div>{{ totalNum ? totalNum : 0 }}</div>
        <div>{{ formatNumber(totalPrice) }}</div>
      </div>
    </template>
  </page-wrap>
  <z-picker
    v-model:show="showItem"
    :columns="typeColumns"
    title="分类"
    @confirm="onConfirm($event)"
  />
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()

const tabList = [{ name: '单品' }, { name: '套餐' }, { name: '单品含套餐' }]
const showItem = ref(false)
const classification = ref('分类')
const initBs = ref(0) // 滚动位置更新
const productInfo = ref([]) // 全部数组
const singleInfo = ref([]) // 单品数组
const packageInfo = ref([]) // 套餐数组
const totalNum = ref('') // 合计数量
const totalPrice = ref('') // 合计价格
const totalResult1 = ref({}) // 单品合计
const totalResult2 = ref({}) // 套餐合计
const totalResult3 = ref({}) // 单品含套餐合计
// 表单
const postForm = reactive({
  type: '',
  startDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
})
// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.startDate = startTime
  postForm.endDate = endTime
  inComeActive.value = '' // 排序清空
  numActive.value = '' // 排序清空
  loadData(true)
}
// -----------------------------------------------切换显示------------------------------------------------------
const selected = ref('单品') // 切换

const change = e => {
  selected.value = e.target.innerText
  console.log(e.target.innerText)
  if (selected.value === '单品含套餐') {
    postForm.type = '2'
  } else {
    postForm.type = ''
  }
  loadData(true)
}

// 分类选项组
const typeColumns = ref([
  {
    goodsTypeCode: '',
    goodsTypeName: '全部',
    text: '全部',
    value: ''
  }
])
// 弹窗确定按钮
const opt = ref('') // 分类筛选条件
const onConfirm = function (ev) {
  opt.value = ev.selectedOptions ? ev.selectedOptions[0] : null

  classification.value = opt.value.text // 分类的名字
  loadData(true)
  //   postForm.waiterUser = opt.value
  showItem.value = false // 关闭弹窗
}

const numActive = ref('') // 销售数量排序
const onSort = e => {
  inComeActive.value = ''
  switch (numActive.value) {
    case '':
      numActive.value = 'active1'
      break
    case 'active1':
      numActive.value = 'active2'
      break
    case 'active2':
      numActive.value = 'active1'
      break
  }
  if (numActive.value === 'active1') {
    singleInfo.value.sort((a, b) => b.saleQty - a.saleQty)
    packageInfo.value.sort((a, b) => b.saleQty - a.saleQty)
    productInfo.value.sort((a, b) => b.saleQty - a.saleQty)
  } else {
    singleInfo.value.sort((a, b) => a.saleQty - b.saleQty)
    packageInfo.value.sort((a, b) => a.saleQty - b.saleQty)
    productInfo.value.sort((a, b) => a.saleQty - b.saleQty)
  }
}
// 销售收入排序
const inComeActive = ref('')
const onSortIncome = e => {
  numActive.value = ''
  switch (inComeActive.value) {
    case '':
      inComeActive.value = 'active1'
      break
    case 'active1':
      inComeActive.value = 'active2'
      break
    case 'active2':
      inComeActive.value = 'active1'
      break
  }
  if (inComeActive.value === 'active1') {
    singleInfo.value.sort((a, b) => b.saleAmt - a.saleAmt)
    packageInfo.value.sort((a, b) => b.saleAmt - a.saleAmt)
    productInfo.value.sort((a, b) => b.saleAmt - a.saleAmt)
  } else {
    singleInfo.value.sort((a, b) => a.saleAmt - b.saleAmt)
    packageInfo.value.sort((a, b) => a.saleAmt - b.saleAmt)
    productInfo.value.sort((a, b) => a.saleAmt - b.saleAmt)
  }
}
// -------------------------------------------------------加载---------------------------------------------------------

// 加载
const loadData = async function (refresh = false) {
  if (refresh === true) {
    productInfo.value = []
    singleInfo.value = []
    packageInfo.value = []
  }
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'GetSaleRanking',
    contentData: postForm
  })
  const nowList = resp.result
  Array.prototype.push.apply(productInfo.value, nowList)
  singleInfo.value = productInfo.value.filter(obj => obj.type === '0') // 单品数组
  packageInfo.value = productInfo.value.filter(obj => obj.type === '1') // 套餐数组
  // 分类
  if (opt.value.goodsTypeCode) {
    singleInfo.value = singleInfo.value.filter(
      obj => obj.goodsType === opt.value.goodsTypeCode
    ) // 单品数组
    packageInfo.value = packageInfo.value.filter(
      obj => obj.goodsType === opt.value.goodsTypeCode
    ) // 套餐数组
    productInfo.value = productInfo.value.filter(
      obj => obj.goodsType === opt.value.goodsTypeCode
    ) // 全部数组
  }
  // 计算数组的总计
  totalResult1.value = singleInfo.value.reduce(
    (total, item) => {
      return {
        saleQty: total.saleQty + item.saleQty,
        saleAmt: total.saleAmt + item.saleAmt
      }
    },
    { saleQty: 0, saleAmt: 0 }
  )
  totalResult2.value = packageInfo.value.reduce(
    (total, item) => {
      return {
        saleQty: total.saleQty + item.saleQty,
        saleAmt: total.saleAmt + item.saleAmt
      }
    },
    { saleQty: 0, saleAmt: 0 }
  )
  totalResult3.value = productInfo.value.reduce(
    (total, item) => {
      return {
        saleQty: total.saleQty + item.saleQty,
        saleAmt: total.saleAmt + item.saleAmt
      }
    },
    { saleQty: 0, saleAmt: 0 }
  )
  switch (selected.value) {
    case '单品':
      totalNum.value = totalResult1.value.saleQty
      totalPrice.value = totalResult1.value.saleAmt
      break
    case '套餐':
      totalNum.value = totalResult2.value.saleQty
      totalPrice.value = totalResult2.value.saleAmt
      break
    case '单品含套餐':
      totalNum.value = totalResult3.value.saleQty
      totalPrice.value = totalResult3.value.saleAmt
      break
  }
  initBs.value++
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {
  typeColumns.value = [
    {
      goodsTypeCode: '',
      goodsTypeName: '全部',
      text: '全部',
      value: ''
    }
  ]
  // 获取分类数据
  Api.Common.AppObjProcess.Do({
    functionName: 'getGoodsTypeOrg',
    contentData: ''
  }).then(res => {
    const DepotList = res.result
    console.log(DepotList);
    // 改造数组 添加picker需要的text和value
    let modifiedObjArr = DepotList.map(obj => {
      return { ...obj, text: obj.goodsTypeName, value: obj.goodsTypeCode }
    })
    let trimmedData = modifiedObjArr.slice(0)
    Array.prototype.push.apply(typeColumns.value, trimmedData)
    console.log(typeColumns.value)
  })

  loadData(true).then(() => {
    totalNum.value = totalResult1.value.saleQty
    totalPrice.value = totalResult1.value.saleAmt
  })
}
onInit()
// // 统计销售的数量
// Api.Common.AppObjProcess.Do({
//   functionName: 'SatSaleRanking',
//   contentData: {
//     startDate: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
//     endDate: dayjs().format('YYYY-MM-DD HH:mm:ss')
//   }
// }).then(res => {
//   console.log(res)
//   onInit()
// })

//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber (num) {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/l.scss';
.performance-container-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .center-tab {
    padding-left: 18px;
    flex-basis: 65%;
    ::v-deep(.van-tabs__nav) {
      justify-content: space-between;
    }
    ::v-deep(.van-tab__text--ellipsis) {
      white-space: pre; // 不隐藏不换行
    }
    ::v-deep(.van-tab) {
      flex: auto;
    }
  }

  .classification {
    border: 1px solid #999999;
    border-radius: 4px;
    position: relative;
    // top: 0px;
    // right: 12px;
    margin-right: 12px;
    padding: 9px 33px 9px 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 14px;
    .classification-icon {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 12px;
      height: 7px;
      background-image: url('@/assets/svg/performance/v_performance-triangle.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }
  .center-line {
    top: 44px;
    width: 100%;
    background: #383840;
    height: 1px;
    position: absolute;
  }
}
.performance-container {
  padding: 8px 12px 40px;
  .tab-main {
    // margin: 8px 12px 0;
    background: #28282e;
    border-radius: 8px;
    // margin-bottom: 40px;
    .main-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 13px;
      padding: 19px 24px 19px 12px;
      background-image: url('@/assets/images/open/i_details_gradient.png');
      // background-repeat: no-repeat;
      // background-position: center center;
      background-size: 100% 100%;
      border-bottom: 1px solid #383840;
      .main-title-name {
      }
      .main-title-num {
        position: relative;
        &.active1 {
          .main-title-icon {
            background-image: url('@/assets/svg/performance/v_performance-sort1.svg');
          }
        }
        &.active2 {
          .main-title-icon {
            background-image: url('@/assets/svg/performance/v_performance-sort1.svg');
            transform: rotate(180deg);
          }
        }
      }
      .main-title-icon {
        width: 8px;
        height: 9px;
        top: 3px;
        right: -10px;
        position: absolute;
        background-image: url('@/assets/svg/performance/v_performance-sort.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }
      .main-title-income {
        position: relative;
        &.active1 {
          .main-title-icon {
            background-image: url('@/assets/svg/performance/v_performance-sort1.svg');
          }
        }
        &.active2 {
          .main-title-icon {
            background-image: url('@/assets/svg/performance/v_performance-sort1.svg');
            transform: rotate(180deg);
          }
        }
      }
    }
    .main-item {
      padding: 0 12px;
      .main-item-upper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 18px;
        padding-bottom: 9px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 14px;
        .item-upper-name {
          //   width: 139px;
          flex-basis: 40%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #cccccc;
        }
        .item-upper-num {
          flex-basis: 30%;
          text-align: center;
        }
        .item-upper-income {
          flex-basis: 30%;
          text-align: right;
        }
      }
      .main-item-below {
        padding: 10px;
        padding-bottom: 0px;
        background: #2d2d33;
        border-radius: 4px;
        // border-bottom: 1px solid #383840;
        li {
          list-style: none;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 13px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;
          .li-name {
            flex-basis: 40%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .li-num {
            // flex-basis: calc(20% + 10px);
            flex-basis: 30%;
            text-align: center;
          }
          .li-income {
            flex-basis: 30%;
            text-align: right;
          }
        }
      }
      .main-item-line {
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #383840;
        padding-top: 9px;
      }
    }
  }
}
.performance-container-footer {
  background: #222226;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffaa00;
  line-height: 16px;
}
</style>
